<template>
    <div>
        <div class="table-header-wrap">
            <filter-form @search="handleSearch" />
        </div>
        <a-table rowKey="id" size="small" :loading="loading" :columns="tableColumns" :data-source="list" :pagination="paginationConfig" @change="handleTableChange" @expand="onExpandChange">
            <template #status="{ record }">
                <a-badge status="success" :text="$filters.valToNameFilter('versionStatus', record.status)" />
            </template>
            <template #processStatus="{ record }"> {{ $filters.valToNameFilter('processStatus', record.processStatus) }} </template>
            <template #expandedRowRender="{ record }">
                <a-table :loading="innerLoading" rowKey="id" :columns="fileColumns" :data-source="record.files" :pagination="false">
                    <template #expectTime="{ record }"> {{ $filters.dateFilter(record.expectTime) }} </template>
                    <template #action="{ record }">
                        <a @click="downFile(record, record.tmpFile)">下载</a>
                    </template>
                </a-table>
            </template>
            <template #action="{ record }">
                <a @click="showDetail(record.id)">详情</a>
            </template>
        </a-table>
    </div>
</template>

<script lang="ts">
import { defineComponent, unref, reactive, toRefs } from 'vue';
import { useDownFile } from '@/hooks/common/useFile';
import api from '@/api';
import FilterForm from './components/filterForm.vue';
import { useTableData, useTableLoading, usePagination, useTableColumns, useTableAction, useTableFormSearch } from '@/components/Table/hooks/index';
export default defineComponent({
    name: 'RelativeVersion',
    components: {
        FilterForm
    },
    props: {
        detail: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props) {
        const { downFile } = useDownFile();
        const { loading, setLoading } = useTableLoading();
        const { paginationConfig, setPaginationConfig } = usePagination();
        const { columns: tableColumns } = useTableColumns('productAnalysisVersion');
        const { list, getList, setList, handleTableChange, setSearchQuery } = useTableData(setLoading, paginationConfig, setPaginationConfig, 'productAnalysisVersion');
        const { handleSearch } = useTableFormSearch(setPaginationConfig, setSearchQuery, getList);
        const { showDetail } = useTableAction('productAnalysisVersion', getList);

        const fileColumns = [
            {
                title: '文件名称',
                dataIndex: 'fileName'
            },
            {
                title: '产出阶段',
                dataIndex: 'connectType'
            },
            {
                title: '更新时间',
                dataIndex: 'createTime'
            },
            {
                title: '操作',
                dataIndex: '',
                key: 'action',
                slots: { customRender: 'action' }
            }
        ];

        const state = reactive({
            innerLoading: false,
            fileList: []
        });
        const onExpandChange = (expanded, record) => {
            if (expanded) {
                const index = list.value.findIndex((item) => item.id === record.id);
                if (!list.value[index].files.length) {
                    getFileList(record.id, index);
                }
            }
        };
        // 获取子表格数据
        const getFileList = async (id: number, index: number) => {
            state.innerLoading = true;
            const query = {
                id
            };
            const { success, moule } = await api.versionModel.findByVersionFiles(query);
            state.innerLoading = false;
            if (success) {
                list.value[index].files = [...moule];
                setList([...unref(list)]);
            }
        };
        setSearchQuery({
            system: props.detail.id
        });
        getList();
        return {
            ...toRefs(state),
            downFile,
            getFileList,
            handleSearch,
            fileColumns,
            showDetail,
            list,
            tableColumns,
            loading,
            paginationConfig,
            handleTableChange,
            onExpandChange
        };
    }
});
</script>
<style scoped lang="less">
.table-header-wrap {
    margin: 16px 0;
}
.table-title {
    font-size: 16px;
    font-weight: bold;
}
</style>